<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"></html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=format-detection content="telephone=no">
    <meta name=format-detection content="email=no">
    <meta name=apple-mobile-web-app-capable content=yes>
    <meta name=apple-mobile-web-app-status-bar-style content=black>
    <meta name=full-screen content=yes><meta name=browsermode content=application>
    <meta name=x5-orientation content=portrait><meta name=x5-fullscreen content=true>
    <meta name=x5-page-mode content=app>
    <meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
    <title>地图展示</title>
    <script src="./js/vue.min.js" th:src="@{/wap/js/vue.min.js}"></script>
    <script src="./js/axios.min.js" th:src="@{/wap/js/axios.min.js}"></script>
    <script src="./js/index.js" th:src="@{/wap/js/index.js}"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=pqM41WLxDVDcpGaOCvFT0A5wlTDOHRXS"></script>
    <style>
        .share-foot{
            width: 100%;
            height: .44rem;
            line-height: .44rem;
            font-size: .16rem;
            color: #332622;
            text-align: center;
            background: #fabf12;
            position: fixed;
            top: 0;
            left: 0;
            letter-spacing: .01rem;
            z-index: 100;
        }
        #allmap{
            width: 100%;
            padding-top: .44rem;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <header class="share-foot">
        <span onclick="javascript :history.back(-1);">返回上一页</span>
    </header>
    <div id="allmap"></div>

<script src="./js/jquery-2.1.1.js" th:src="@{/wap/js/jquery-2.1.1.js}"></script>
<script th:inline="javascript">
    var app = new Vue({
        el: '#content',
        data: {
            contents: {}
        },
        methods: {
            /*页面数据获取*/
            getNew: function () {
                var zxc = this;
                /*axios.post(baseUrl + 'dealer/wap/app/store/info/' + GetQueryString('id'), {
                }).then(function (response) {
                    console.log(response)
                    zxc.contents = response.data.data;
                }).catch(function (error) {
                    console.log(error);
                });*/
                this.map();
            },
            map: function () {
                var map = new BMap.Map("allmap");
                var point = new BMap.Point(GetQueryString('longitude'),GetQueryString('latitude'));
                var marker = new BMap.Marker(point);  // 创建标注
                map.addOverlay(marker);              // 将标注添加到地图中
                map.centerAndZoom(point, 15);
                var opts = {
                    width : 150,     // 信息窗口宽度
                    height: 70,     // 信息窗口高度
                    title : GetQueryString('name'), // 信息窗口标题
                    enableMessage: true,//设置允许信息窗发送短息
                    message: GetQueryString('name')
                }
                var infoWindow = new BMap.InfoWindow(GetQueryString('address'), opts);  // 创建信息窗口对象
                marker.addEventListener("click", function(){
                    map.openInfoWindow(infoWindow,point); //开启信息窗口
                });
            },
            phone: function (val) {
                alert(JSON.stringify({
                    type: 'tel',
                    data: val
                }))
            }
        },
        created: function (){
            this.getNew();
            $("#allmap").height($(document).height())
        }
    });

</script>

</body>
</html>
